<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      <!-- <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
        @onCreated="onCreated" @onChange="onChange" @onDestroyed="onDestroyed" @onMaxLength="onMaxLength"
        @onFocus="onFocus" @onBlur="onBlur" @customAlert="customAlert" @customPaste="customPaste"
         /> -->
      <Editor style="min-height: 160px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
        @onCreated="onCreated" @onChange="onChange" />
    </div>
    <!-- <div style="width: 100%; text-align: center; margin-top: 20px">
      <a-button type="primary" @click="saveDetail">保存活动详情</a-button>
    </div> -->
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { uploadNewFile } from "@/api/manage/base"

export default {
  name: 'editor',
  components: {
    Editor,
    Toolbar
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            customUpload: this.imgUpdate
          },
          // 配置上传图片
          uploadVideo: {
            customUpload: this.imgVideo
          }
        }
      },
      mode: 'default', // or 'simple'
    }
  },
  mounted() {

  },
  methods: {
    saveDetail() {
      console.log(this.html);
    },
    // 初始化插件
    initInfo(html) {
      this.html = html
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
      // console.log('onCreated', editor)
    },
    // 富文本编辑器更改内容
    onChange(editor) {
      this.$emit('submitOk', this.html)
      // console.log('onChange', editor)
    },
    // 上传图片
    imgUpdate(file, insertFn) {
      if (file === undefined) { return; }
      if (file.type.indexOf('image') === -1) {
        this.$message.error("非法图片格式");
        return;
      }
      var params = new FormData();
      params.append("file", file);
      params.append("dirName", '政策库图片');
      uploadNewFile(params).then(res => {
        if (res.code == '1') {
          insertFn(res.data, '', res.data)
        } else { }
      })
    },
    // 上传视频
    imgVideo(file, insertFn) {
      if (file === undefined) { return; }
      if (file.type.indexOf('video') === -1) {
        this.$message.error("非法视频格式");
        return;
      }
      var params = new FormData();
      params.append("file", file);
      params.append("dirName", '政策库视频');
      uploadNewFile(params).then(res => {
        if (res.code == '1') {
          insertFn(res.data, '', res.data)
        } else { }
      })
    },
    onDestroyed(editor) { console.log('onDestroyed', editor) },
    onMaxLength(editor) { console.log('onMaxLength', editor) },
    onFocus(editor) { console.log('onFocus', editor) },
    onBlur(editor) { console.log('onBlur', editor) },
    customAlert(info, type) { window.alert(`customAlert in Vue demo\n${type}:\n${info}`) },
    customPaste(editor, event, callback) {
      console.log('ClipboardEvent 粘贴事件对象', event)
      // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
      // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
      // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

      // 自定义插入内容
      editor.insertText('xxx')

      // 返回 false ，阻止默认粘贴行为
      event.preventDefault()
      callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）

      // 返回 true ，继续默认的粘贴行为
      // callback(true)
    },
  },

  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}

</script>
